<template>
  <a-modal title-align="start" title="认领产品" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="800">
    <div class="flex-c">
      <div>
        <icon-exclamation-circle-fill style="color: #dd831a; font-size: 28px" />
      </div>
      <div class="ml10" style="font-size: 16px">请再次确认,是否认领以下产品?</div>
    </div>
    <div style="margin-left: 38px">认领需要主管审核,如果审核通过,请及时去刊登上架,未刊登上架的将在第57天提醒,第60天释放回共享库</div>

    <a-table :pagination="false" class="table-two-line mt10" :data="list">
      <template #columns>
        <a-table-column title="序号" #cell="{ record, rowIndex }">{{ rowIndex }}</a-table-column>
        <a-table-column title="产品图片" #cell="{ record, rowIndex }">
          <a-image fit="contain" width="40px" height="40px" :src="getUrl(record)">
            <template #error>
              <img style="width: 100%; height: 100%" src="https://cdn2.selleroa.com/saas/product/118310735721069569.png" alt="" />
            </template>
          </a-image>
        </a-table-column>
        <a-table-column title="SPU" #cell="{ record, rowIndex }">
          <textLimit position="top" :rows="1" :val="record.spu"></textLimit>
        </a-table-column>
        <a-table-column title="产品类目" #cell="{ record, rowIndex }">
          {{ $extract(record, 'category.name') }}
        </a-table-column>
        <!-- <a-table-column title="现有库存" #cell="{ record, rowIndex }"></a-table-column> -->
        <a-table-column title="关联变体数" #cell="{ record, rowIndex }">
          {{ $extract(record, 'supplierProductSkuList.length') }}
        </a-table-column>
      </template>
    </a-table>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" :loading="submitLoading" @click="submit">提交认领</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue'
  import { batchClaim } from '@/api/product'
  let props = defineProps(['modelValue', 'list'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let submitLoading = ref(false)

  const getUrl = (data: any) => {
    let arr = data?.productPicList || []
    if (arr.length > 0) {
      return arr[0].url
    } else {
      return ''
    }
  }

  const submit = async () => {
    try {
      submitLoading.value = true
      const res: any = await batchClaim({ idList: props.list.map((e: any) => e.id) })
      if (res) {
        emits('save')
        showvisible.value = false
      }
    } catch (error) {}
    submitLoading.value = false
  }
</script>

<style lang="less" scoped></style>
